<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>用户信息修改</title>
    <link rel="stylesheet" href="/css/index.css"/>
    <script src="/js/jquery-3.7.1.min.js"></script>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #f5f7fa;
            margin: 0;
            padding: 20px;
        }

        h2 {
            color: #333;
            text-align: center;
        }

        form {
            max-width: 600px;
            margin: 0 auto;
            background: #fff;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        td {
            padding: 10px 15px;
            vertical-align: middle;
        }

        td:first-child {
            text-align: right;
            color: #555;
            width: 30%;
        }

        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="file"] {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }

        input[type="submit"] {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            margin-top: 10px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        tr:last-child td {
            text-align: center;
        }

        .avatar-preview {
            display: block;
            margin: 10px 0;
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #ccc;
        }

    </style>
</head>
<body class="second">

<h1><a href="/">回到首页</a></h1>
<h2 style="text-align:center;">个人信息修改</h2>

<form id="userInfoForm" method="post">
    <table class="form_table" style="margin: auto;">
        <tr>
            <th>账户名：</th>
            <td>${user.account}</td>
        </tr>
        <tr>
            <th>邮箱：</th>
            <td><input type="email" name="email" value="${user.email}"/></td>
        </tr>
        <tr>
            <th>电话：</th>
            <td><input type="text" name="telphone" maxlength="11" value="${user.telphone}"/></td>
        </tr>
        <tr>
            <th>头像：</th>
            <td>
                <input type="file" id="uploadInput" name="avatarFile" accept="image/*"/>
                <input type="hidden" id="avatarUrl" name="avatar" value="${user.avatar}"/>
                <img id="showImage" class="avatar-preview" src="${user.avatar}" alt="头像预览"/>
            </td>
        </tr>
        <tr>
            <th>新密码：</th>
            <td><input type="password" name="newPassword"/></td>
        </tr>
        <tr>
            <th>确认新密码：</th>
            <td><input type="password" name="confirmPassword"/></td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center;">
                <input type="button" class="submit" value="保存修改" onclick="updateUserInfo()"/>
            </td>
        </tr>
    </table>
</form>

<script>
    // 头像上传
    $('#uploadInput').on('change', function () {
        const file = this.files[0];
        if (!file || !file.type.startsWith('image/')) {
            alert('请选择图片文件');
            return;
        }

        const formData = new FormData();
        formData.append('file', file);

        $.ajax({
            url: '/user/upload', // 图片上传接口
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                $('#showImage').attr('src', response);
                $('#avatarUrl').val(response);
            },
            error: function () {
                alert("上传头像失败");
            }
        });
    });

    // 表单提交逻辑
    function updateUserInfo() {
        const formData = new FormData($('#userInfoForm')[0]);

        $.ajax({
            url: '/ucenter/update',  // 用户信息更新接口
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                if (response === 'success') {
                    alert("信息修改成功");
                    window.location.reload();
                } else {
                    alert("修改失败：" + response);
                }
            },
            error: function (xhr) {
                alert("系统异常：" + (xhr.responseText || '未知错误'));
            }
        });
    }
</script>
</body>
</html>
